<html xmlns="http://www.w3.org/1999/xhtml" xmlns:lift="http://liftweb.net/">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title class="lift:Menu.title">COLLABORATIVE IDE</title>
	
    <link rel="stylesheet" type="text/css" href="/css/codemirror.css"/>
	<link rel="stylesheet" type="text/css" href="/css/modaldbox.css"/>
    <link href="/css/style.css" rel="stylesheet" type="text/css" />

        <!-- CSS for the file list -->
	<link rel="stylesheet" type="text/css" href="/filelist-template/css/filelist-template.css"/>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" type="text/css" media="all" /> 
	<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
	<!-- <link rel="stylesheet" type="text/css" href="mode/clike/clike.css"/> -->
	<style type="text/css"> 
	.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
	.activeline {background: #fff !important;}
	</style>
	<style type="text/css">
/* <![CDATA[ */
.edit_error_class {
  display: block;
  color: red;
}

.userMenu{
	z-index: 999;
	float:right;
	width:100%;
	list-style:none;
	font-weight:bold;
	margin-right: 70px;
	margin-top: 7px;
	font: 15px/18px Tahoma Neue,Helvetica,Arial,sans-serif !important;	
}
.userMenu li{
	float:right;
	margin-right:10px;
	display:block;
}
.userMenu li a{
	display:block;
	padding:0px;
	color:#fff;
	text-decoration:none;

	text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Text shadow to lift it a little */
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
}
.userMenu li a:hover{
	color: rgb(191, 187, 136);
}
#userMenuID{
	margin-top:0px;
	}


.userMenu ul{
	right:5000px;
	list-style:none;
	position:absolute;
	-webkit-transition:0.25s linear opacity; 
		background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.05, rgb(59,58,59)),
	    color-stop(0.48, rgb(102,102,102)),
	    color-stop(0.88, rgb(156,156,156))
	);
	background-image: -moz-linear-gradient(
	    center bottom,
	    rgb(59,58,59) 5%,
	    rgb(102,102,102) 48%,
	    rgb(156,156,156) 88%
	);
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	height: 171px;
	z-index: 600;
	
	
}
.userMenu ul li{
	padding-top:14px; 
	float:none;
}

.userMenu ul a{
	white-space:nowrap; 
	display:block;
}
.userMenu li:hover ul{ 
	right:0; 
	opacity:1; 
}

.userMenu li:hover ul a{ 
	text-decoration:none;
	-webkit-transition:-webkit-transform 0.075s linear;
}
.userMenu li:hover ul li a:hover{ 

	-moz-transform:scale(1.05);
	-webkit-transform:scale(1.05);
}




  /* ]]> */
  </style>

	<script id="jquery" src="/classpath/jquery.js" type="text/javascript"></script>
    <script id="json" src="/classpath/json.js" type="text/javascript"></script>

    <style Type="text/css">
    body {
      background-color: white;
      font-family: sans-serif;
    }
    h1, h2, h3 {
      font-weight: normal;
    }
    </style>



	<script src="lib/jquery-ui-1.7.3.custom.min.js"></script>
    
    <script src="static/mobwrite/static/compressed_codemirror.js"></script>
    
    <script src="static/mobwrite/static/codemirror/js/codemirror.js"></script>
    <script>
      mobwrite.syncGateway = 'http://mobwrite3.appspot.com/scripts/q.py';
    </script>
	

	<script type="text/javascript">
  function saveBuffer() {
    var buffer = jQuery('#buffer')[0];
    buffer.value = demo_editor_text.getCode();
    var form = jQuery('#save_form form')[0];
    // this doesn't work!
    // form.submit();
    var onsubmit = form.getAttribute('onsubmit');
    var fs = 'function xyzzy() { ' + onsubmit + ' };';
    // alert('buffer ' + buffer.value);
    eval(fs);
    xyzzy();
  }
  
  function buildButton() {
    var userIDform = jQuery('#userID')[0];
    var userID = userIDform.innerHTML;
    var projectIDform = jQuery('#projectId')[0];
    var projectID = projectIDform.value;
    compile('compiling...');
    AJAX('http://localhost:8080/userId/'+userID+'/projectId/'+projectID+'.xml', 'compiling');
    
  }
  
  function AJAX(url, callback) {
	
	var xmlhttp = new XMLHttpRequest();	
	var object = {}; 
	
	xmlhttp.open( 'GET', url, true );
	xmlhttp.onreadystatechange = function () {
		if(xmlhttp.readyState == 4){
			if(xmlhttp.status == 200) {
				if(callback == 'compiling') {
					compile(xmlhttp.responseText);
				}
			}
		}
	};
 
	xmlhttp.send(null);
	
	
}

  function compile(response) {
  
  	
    var log = jQuery('#log')[0];
    log.innerHTML = response;
  
  }
  
   
</script>

	<script type="text/javascript">
		function getURL() {
			var strHref = window.location.href;
			var url = strHref.split('/');
			window.filename = url.pop();
		}
	</script>
	
	<!-- SLIDERS -->
	<script src="lib/left-slider.js"></script>
	<script src="lib/right-slider.js"></script>
	<!-- LEFT -->
	<script type="text/javascript">
		$(function(){
		     $('.left-slider').leftSlide({
		         tabHandle: '.left-handle',             
		         pathToTabImage: 'img/left-tab.png',
		         imageHeight: '172px',                    
		         imageWidth: '35px',                 
		     });

		 });
	</script>
	<!-- /LEFT -->
	<!-- RIGHT -->
	<script>
		$(function(){
		     $('.right-slider').rightSlide({
		         tabHandle: '.right-handle',                    
		         pathToTabImage: 'img/right-tab.png', 
		         imageHeight: '172px',                   
		         imageWidth: '35px',                   
		     });

		 });
	</script>
	<!-- /RIGHT -->
	<!-- /SLIDERS -->
		
  </head>

<!-- INSERIRE IL NOME DEL FILE -->
<!-- <body onload="var name = getURL(); "> -->
	<body onload="getURL(); mobwrite.share(demo_editor_text);">
			
		<div style="width: 200px; float:right;">
			<ul class="userMenu">
				<li>
					<a href="#">Menu</a>
					<span  class="userMenu"><lift:Menu.builder></lift:Menu.builder></span>
				</li>
			</ul>
		</div>
		
	<!-- body -->

		<div id="top_menu">
			<ul><li style="margin-top: 2px;"><span class="lift:FileIn.projectNameWithLink">ProjectName</span></li>
				<li class="nohover">|</li>
				<li>
					<img src="/img/download.png" />
					<a href="#" class="lift:Download.getlink">Download</a>
					</li>
				<li><img src="/img/build.png" />
				<a href="#" onClick="javascript:buildButton()">Build</a>

				</li>
						  <li style="margin-top: 3px;">
								
                                    <img src="/img/share-icon-12x12.png" />
                                    <span class="lift:FileIn.addUserLink">Share</span>
                                
                           </li>
				<li class="nohover">|</li>
				
				<li>
                    <img src="/img/save.png" />
                    <a href="#" onclick="javascript:saveBuffer()">Save</a>
                </li>
				
			</ul>
			
		</div>
		
		<script>
			$(function() {
				$('#tabs').tabs();
			});
			</script>
	
        <div id="content">The main content will get bound here</div>

		<script type="text/javascript" charset="utf-8">
			var codearea = document.getElementById('codearea');
			var left = document.getElementById('left_sidebar');
			var right = document.getElementById('right_sidebar');
			var left_button = document.getElementById('left_button');
			var right_button = document.getElementById('right_button');
			left.value = 'true';
			right.value = 'true';
		</script>
		
		
    	<script type="text/javascript">
	      var demo_editor_text = mobwrite.shareCodeMirror.create(
	        key, {
	          height: '100%',
	          width: '100%',
	          parserfile: ['tokenizejavascript.js', 'parsejavascript.js'],
	          path: 'static/mobwrite/static/codemirror/js/',
	          stylesheet: 'static/mobwrite/static/codemirror/css/jscolors.css',
	          tabMode: 'shift',
	          autoMatchParens: true
	        });
	    </script>
	
	  <script type="text/javascript" src="/ajax_request/liftAjax.js"></script> 
	

  </body>
</html>
